<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${basePath!}/static/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="${basePath!}/static/css/form.css"  media="all">
</head>
<body>
<div class="layui-btn-group" style="margin-top: 2px;">
    <button class="layui-btn" id="add">录入</button>
    <button class="layui-btn" id="edit">编辑</button>
    <button class="layui-btn" id="delete">删除</button>
    <button class="layui-btn" id="export">导出</button>
    <button type="button" class="layui-btn" id="import"><i class="layui-icon"></i>上传文件</button>
</div>
<iframe id="ifile" style="display:none"></iframe>
<table class="layui-hide" id="company" lay-filter="companyFilter"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="custom">客户信息</a>
</script>
<script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath!}/static/js/jquery.form.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/layui.js"  charset="utf-8" type="text/javascript"></script>
<script src="${basePath!}/static/js/utils.js"  charset="utf-8" type="text/javascript"></script>
<script>
    var companyId;
    layui.use(['table', 'form', 'upload', 'laydate'], function(){
        //指定允许上传的文件类型
        layui.upload.render({
            elem: '#import'
            ,url: '${basePath!}/company/uploadExcel'
            ,accept: 'file' //普通文件
            ,done: function(res){
                layui.table.reload('company');
            }
        });
        var table = layui.table;
        table.render({
            elem: '#company'
            ,url:'${basePath!}/company/selectPageList'
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'ID', hide: true}
                ,{field:'companyName', minWidth:200, title: '客户单位'}
                ,{field:'department', minWidth:120, title: '部门名称'}
                ,{field:'address', minWidth:240, title: '单位地址'}
                ,{field:'creator', width:180, title: '录入人'}
                ,{field:'createTime', width:180, title: '录入时间'}
                ,{fixed: 'right', width:100, align:'center', toolbar: '#barDemo', title: '操作'}
            ]]
            ,page: true
            , done : function(res, curr, count) {
                merge(res);
            }
        });

        //监听工具条
        table.on('tool(companyFilter)', function(obj){
            if(obj.event === 'custom'){
                layer.open({
                    type: 2,
                    title:["客户记录"],
                    area: ['100%', '100%'],
                    maxmin:true,
                    scrollbar: false ,
                    content:['customTab','yes'],
                    success: function (layer, index) {
                        // 获取子页面的iframe
                        var iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        iframe.initPage(obj.data);
                    }
                });
            }
        });

        //监听提交
        layui.form.on('submit(onSave)', function(data){
            if(companyId){
                $("#id").val(companyId);
            }
            $.ajax({
                type: "POST",
                url:"${basePath!}/company/edit",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                async: true,
                error: function(request) {
                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                },
                success: function(data) {
                    if(data.status==false){
                        layer.alert(data.message);
                    }
                    if(data.status==true){
                        layer.close(layerid);
                        layui.table.reload('company');
                    }
                }
            });
            return false;//防止表单提交后跳转
        });
    });

    function merge(res) {

        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['companyName','creator'];//需要合并的列名称
        var columsIndex = [2,5];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }

    $("#export").click(function () {
        var dom=document.getElementById('ifile');
        dom.src="${basePath!}/company/downLoadExcel";
    });

    //添加按钮点击事件
    $("#add").click(function () {
        companyId = '';
        $("#reset").click();//重置表单(新建时在进入表单前要重置一下表单的内容，不然表单打开后会显示上一次的表单的内容。这里调用表单中重置按钮的点击方法来重置)
        layerid=layer.open({//开启表单弹层
            skin: 'layui-layer-molv',
            area:'60%',
            type: 1,
            title:'录入客户单位',
            content: $('#company_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#delete").click(function () {
        var data = layui.table.checkStatus('company').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        $.ajax({
            type: "DELETE",
            url: "${basePath!}/company/deleteByIds?ids="+getIds(data),
            dataType: "json",
            async: true,
            error: function (request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function (result) {
                layer.alert("共删除"+data.length+"信息");
                layui.table.reload('company');
            }
        });
    });

    $("#edit").click(function () {
        var data = layui.table.checkStatus('company').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        if(data.length>1){
            layer.alert("至多只能选择一条信息编辑");
            return;
        }
        $.ajax({
            type: "GET",
            url:"${basePath!}/company/selectByPrimaryKey?id="+data[0].id,
            async: true,
            error: function(request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function(result) {
                companyId = result.data.id;
                if(result.status==false){
                    layer.alert(data.message);
                }
                if(result.status==true){
                    //向表单填充数据
                    layui.form.val("companyFilter",result.data);
                    //开启编辑表单所在的弹层。注意编辑和新建的表单是一套模板
                    layerid=layer.open({
                        skin: 'layui-layer-molv',
                        area:'60%',
                        type: 1,
                        title:'编辑客户单位信息',
                        content: $('#company_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                }
            }
        });
    });
</script>
<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="company_form_div" hidden="" class="layui-fluid" style="margin: 15px;">
    <form class="layui-form" lay-filter="companyFilter" action="" id="company_form">
        <label hidden="true" id="editlabelid"></label>
        <input id="editid" name="id" value="" hidden/>
        <div class="layui-form-item">
            <div class="layui-form-label">客户单位</div>
            <div class="layui-input-block">
                <input type="text" id="companyName" name="companyName" lay-verify="required" autocomplete="off" placeholder="请输入客户单位" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" id="department" name="department" lay-verify="required" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单位地址</label>
            <div class="layui-input-block">
                <input type="text" id="address" name="address" autocomplete="off" placeholder="请输入单位地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div style="text-align: center;">
                <button class="layui-btn" lay-submit="" lay-filter="onSave">保存</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
</body>
</html>